<template>
    <div class="todo-li">
        <li>
            <label>
                <input type="checkbox" :checked="todo.done" @change="handleChecked(todo.id)"/>
                <span style="padding-left: 6px;">{{todo.title}}</span>
            </label>
            <el-button round size="mini"
                       style="float: right; margin: 10px 10px 10px;"
                       @click="handleDelete(todo.id)"
            >删除</el-button>
        </li>
    </div>
</template>

<script>
    export default {
        name: "MyItem",
        /* v-model 是不推荐监听props中的属性的,违反原则, vue是不能通过v-model修改props属性的 */
        props: ['todo', 'handleCheckTableData', 'handleDeleteData'],
        methods: {
            handleChecked(todoId) {
                this.handleCheckTableData(todoId)
            },
            handleDelete(todoId) {
                if (confirm('确认删除?'))
                    this.handleDeleteData(todoId)
            }
        }
    }
</script>

<style scoped>
    .todo-li {
        list-style: none;
        margin: 15px 20px 5px 0px;
        height: 50px;
        border-bottom: 1px solid #cccccc;
        border-radius: 8px;
    }
    .todo-li li {
        line-height: 50px;
    }
    .todo-li .el-button {
        display: none;
    }
    /* 这里最初我出现了一个错误, 我将hover设置到了el-button上,
    实际el-button已经隐藏hover无法生效, 所以需要将hover设置到存在的元素上 */
    .todo-li:hover .el-button {
        display: block;
    }
    .todo-li:hover {
        background-color: #cccccc;
    }
</style>